<template>
    <div class="home full_page">

        <cube-scroll
                ref="scroll">
            <div class="home-content">
                <slider/>
                <notice @getTop="getTop" />
                <top-tab :items="topItems" />
                <my-title style="margin-top: 10px" />
                <item v-for="(item,index) in items" :key="index" :item="item"  style="margin-top: 10px"/>
            </div>
        </cube-scroll>

    </div>
</template>

<script>
    import slider from '../../components/slider'
    import notice from '../../components/notice'
    import topTab from '../../components/top-tab'
    import myTitle from '../../components/title'
    import item from  '../../components/item'
    import {getList} from "../../api/home";

    export default {
        data(){
          return {
              items:[],
              topItems:[]
          }
        },
        created(){
            this.getList()
        },
        methods:{
          getTop(){
               if(this.items){
                   let length = this.items.length
                   this.topItems = []
                   for (let i = 0; i < 4; i++) {
                       let index = Math.floor(Math.random()*length)
                       this.topItems.push(this.items[index])
                   }
               }
          },
          getList(){
              //页码相关
              let limit = 100
              let page = 1
              getList({limit,page}).then(res=>{
                  this.items = res.data
                  this.getTop()
              })
          }
        },
        components:{
            slider,
            notice,
            topTab,
            myTitle,
            item
        }

    }
</script>

<style type="text/stylus" lang="stylus">
    .home
        overflow hidden
        background-color #F5F5F5
</style>
